<template>
  <div>
    <ul>
      <li
        v-for="file in fileList"
        :key="file.id"
        @click="downloadFile(file)"
      >
        <!-- 图片 -->
        <div v-if="file.contentType.startsWith('image')">
          <c-image
            :src="file.url"
            style="
                width: 36px;
                display: flex;
                align-items: center;
                height: 36px;
              "
            fit="contain"
          />
          <p :title="file.originalFileName">
            {{ file.originalFileName }}
          </p>
        </div>

        <!-- pdf -->
        <div v-else-if="file.contentType === FILETYPE.pdf" class="img">
          <img src="./icons/pdf.png" style="width: 36px; height: 36px" alt="" />
          <p :title="file.originalFileName">
            {{ file.originalFileName }}
          </p>
        </div>

        <!-- word -->
        <div
          v-else-if="file.contentType === FILETYPE.doc || file.contentType === FILETYPE.docx"
          class="img"
        >
          <img src="./icons/doc.png" style="width: 36px; height: 36px" alt="" />
          <p :title="file.originalFileName">
            {{ file.originalFileName }}
          </p>
        </div>

        <!-- excel -->
        <div
          v-else-if="file.contentType === FILETYPE.xls || file.contentType === FILETYPE.xlsx"
          class="img"
        >
          <img src="./icons/excel.png" style="width: 36px; height: 36px" alt="" />
          <p :title="file.originalFileName">
            {{ file.originalFileName }}
          </p>
        </div>

        <!-- ppt -->
        <div
          v-else-if="file.contentType === FILETYPE.ppt || file.contentType === FILETYPE.pptx"
          class="img"
        >
          <img src="./icons/PPT.png" style="width: 36px; height: 36px" alt="" />
          <p :title="file.originalFileName">
            {{ file.originalFileName }}
          </p>
        </div>

        <!-- txt -->
        <div v-else-if="file.contentType === FILETYPE.txt" class="img">
          <img src="./icons/txt.png" style="width: 36px; height: 36px" alt="" />
          <p :title="file.originalFileName">
            {{ file.originalFileName }}
          </p>
        </div>

        <!-- video -->
        <div v-else-if="file.contentType.startsWith('video')" class="img">
          <video width="36" height="36" :src="file.url" />
          <p :title="file.originalFileName">
            {{ file.originalFileName }}
          </p>
        </div>

        <!-- audio -->
        <div v-else-if="file.contentType.startsWith('audio')" class="img">
          <img src="./icons/audio.png" style="width: 36px; height: 36px" alt="" />
          <p :title="file.originalFileName">
            {{ file.originalFileName }}
          </p>
        </div>

        <div v-else>
          文件
        </div>

      </li>
    </ul>
  </div>
</template>

<script>
import { findFilesByIds } from '@/api/taskManegement'
import { download2, downloadImg, downloadVideo, downloadAudio } from '@/utils/export'

const FILETYPE = {
  image: [
    'gif',
    'jpeg',
    'jpg',
    'png',
    'svg+xml',
    'tiff',
    'jfif',
    'vnd.wap.wbmp',
    'webp'
  ],
  video: ['m4v', 'mov', 'mp4', 'ogv'],
  audio: ['oga', 'ogg', 'uvva', 'mp3'],
  doc: 'application/msword',
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  xls: 'application/vnd.ms-excel',
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  pdf: 'application/pdf',
  ppt: 'application/vnd.ms-powerpoint',
  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
  txt: 'text/plain'
}

export default {
  name: 'FileDetail',

  props: ['ids', 'file'],

  data () {
    return {
      fileList: []
    }
  },

  computed: {
    FILETYPE () {
      return FILETYPE
    }
  },

  watch: {
    ids: {
      handler: function (newVal) {
        if (newVal && !this.file) {
          this.findFile()
        } else {
          this.fileList = this.file
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    async findFile () {
      const { success, data } = await findFilesByIds({
        ids: this.ids
      })
      if (success) {
        this.fileList = data
      }
    },

    // 下载文件
    downloadFile (file) {
      // 下载图片
      if (file.contentType.startsWith('image')) {
        downloadImg(file)
        return
      }
      // 下载视频
      if (file.contentType.startsWith('video')) {
        downloadVideo(file)
        return
      }
      // 下载音频
      if (file.contentType.startsWith('audio')) {
        downloadAudio(file)
        return
      }
      download2(file.url)
    }
  }

}
</script>

<style scoped lang='scss'>
ul {
  display: flex;
  align-items: center;
  padding-left: 0;

  li {
    list-style-type: none;
    cursor: pointer;

    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 12px;

      > p {
        width: 50px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #999999;
        line-height: 17px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 0;
      }
    }
  }
}
</style>
